// data-set 可以按需引入，除此之外不要引入别的包
import React from 'react';
import { Chart, Axis, Geom, Tooltip } from 'bizcharts';

// 下面的代码会被作为 cdn script 注入 注释勿删
// CDN START

function formatLabel(text, index, total) {
  const textCfg = {};
  if (index === 0) {
    textCfg.textAlign = 'left';
  } else if (index === total - 1) {
    textCfg.textAlign = 'right';
  }
  return textCfg;
}

function onShowTooltip(ev) {
  const items = ev.items;
  items[0].name = items[0].title;
}

class lineChart extends React.Component {
  render() {
    const { data, defs } = this.props;
    return (
      <Chart width={window.innerWidth-16}
                height={320} data={data} defs={defs}  padding={[40, 'auto', 80, 'auto']} pixelRatio={window.devicePixelRatio * 2} >
        <Axis dataKey="x"  label={{ textAlign: data && (data.length > 10 || data[0].x.length > 5) ? 'start' : '', rotate: data && (data.length > 10 || data[0].x.length > 5) ? 120 : 0}} />
        <Axis dataKey="y" label={{ fontSize: 12 }} />
        <Geom geom="line" position="x*y" />
        <Tooltip showItemMarker={false} showCrosshairs onShow={onShowTooltip} />
      </Chart>
    );
  }
}

// CDN END
export default lineChart;
